<fieldset class="form--fieldset">
  <legend class="form--fieldset-legend" title="<%= @device.name  %>"><%= @device.name  %></legend>

  <p><%= t('two_factor_authentication.devices.totp.description') %></p>

  <div class="form--field -required">
    <%= f.text_field :identifier, required: true, container_class: '-middle' %>
    <div class="form--field-instructions">
      <%= t('two_factor_authentication.devices.text_identifier') %>
    </div>
  </div>

  <%= f.hidden_field :otp_secret, value: @device.otp_secret %>
</fieldset>

<div class="mobile-otp-qr-form">
  <div class="qr-code-element" data-value="<%= device.provisioning_url %>">
  </div>
  <div class="mobile-otp-qr-manually">
    <p>
      <strong><%= t('two_factor_authentication.devices.totp.question_cannot_scan') %></strong>
      <br/>
      <%= t('two_factor_authentication.devices.totp.text_cannot_scan') %>
    </p>
    <div class="attributes-key-value">
      <div class="attributes-key-value--key"><%= t('two_factor_authentication.devices.totp.account') %></div>
      <div class="attributes-key-value--value-container">
        <div class="attributes-key-value--value">
          <span><%= device.account_name %></span>
        </div>
      </div>
      <div class="attributes-key-value--key"><%= t('two_factor_authentication.devices.totp.secret_key') %></div>
      <div class="attributes-key-value--value-container">
        <div class="attributes-key-value--value">
          <span><%= device.otp_secret %></span>
        </div>
      </div>
      <div class="attributes-key-value--key"><%= t('two_factor_authentication.devices.totp.time_based') %></div>
      <div class="attributes-key-value--value-container">
        <div class="attributes-key-value--value">
          <span><%= t('general_text_Yes') %></span>
        </div>
      </div>
      <div class="attributes-key-value--key"><%= t('two_factor_authentication.devices.totp.provisioning_uri') %></div>
      <div class="attributes-key-value--value-container">
        <div class="attributes-key-value--value">
          <span><%= device.provisioning_url %></span>
        </div>
      </div>
    </div>
  </div>
</div>
